<template>
  <div>
    <el-card>
      <el-card shadow="never" class="search">
        <el-form
          ref="searchForm"
          :model="pageParam"
          label-width="80px"
          size="mini"
        >
          <el-form-item label="文章标题" prop="title" class="item">
            <el-input
              placeholder="不输入则忽略标题筛选"
              v-model="pageParam.title"
              style="width: 193px"
            ></el-input>
          </el-form-item>
          <el-form-item label="文章类型" prop="type" class="item">
            <el-select
              clearable
              v-model="pageParam.type"
              placeholder="请选择文章类型"
            >
              <el-option
                v-for="(item, index) in typeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文章分类" prop="categoryId" class="item">
            <el-select
              clearable
              v-model="pageParam.categoryId"
              placeholder="请选择文章分类"
            >
              <el-option
                v-for="(item, index) in categoryOptions"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布状态" prop="published" class="item">
            <el-select
              clearable
              v-model="pageParam.published"
              placeholder="请选择发布状态"
            >
              <el-option
                v-for="(item, index) in publishedOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审核状态" prop="status" class="item">
            <el-select
              clearable
              v-model="pageParam.status"
              placeholder="请选择审核状态"
            >
              <el-option
                v-for="(item, index) in statusOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期范围" prop="startDate" class="item">
            <el-date-picker
              v-model="pageParam.startDate"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item size="large">
            <el-button size="small" type="primary" @click="onSubmit"
              >搜索</el-button
            >
            <el-button size="small" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
        class="table"
        size="mini"
      >
        <el-table-column fixed type="selection" width="40"> </el-table-column>
        <el-table-column prop="id" label="id" width="50"> </el-table-column>
        <el-table-column prop="title" label="标题" width="250">
        </el-table-column>
        <el-table-column prop="cover" label="封面" width="130">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.cover"
              alt=""
              style="width: 100px; height: 30px"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="65">
          <template slot-scope="scope">
            <el-tag
              style="color: #fff"
              size="mini"
              color="#009688"
              v-if="scope.row.type == 1"
              >原创</el-tag
            >
            <el-tag
              style="color: #fff"
              size="mini"
              color="#FFB800"
              v-else
              type="warning"
              >转载</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="category" label="分类" width="90">
          <template slot-scope="scope">
            <el-tag size="mini" :color="scope.row.category.color">{{
              scope.row.category.name
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="tagList" label="标签" width="350">
          <template slot-scope="scope">
            <el-tag
              v-for="item in scope.row.tagList"
              :key="item.id"
              :color="item.color"
              :disable-transitions="true"
              size="mini"
            >
              {{ item.name }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="published" label="发布状态" width="70">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.published == true"
              style="color: #fff"
              size="mini"
              color="#009688"
              >发布</el-tag
            >
            <el-tag v-else style="color: #fff" size="mini" color="#FFB800"
              >草稿</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="status" label="审核状态" width="85">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status == 0"
              style="color: #fff"
              size="mini"
              color="#FF5722"
              >审核未过</el-tag
            >

            <el-tag
              v-else-if="scope.row.status == 1"
              style="color: #fff"
              size="mini"
              color="#1E9FFF"
              >等待审核</el-tag
            >
            <el-tag v-else style="color: #fff" size="mini" color="#009688"
              >审核通过</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="views" label="浏览量" width="60">
          <template slot-scope="scope">
            <el-tag
              style="color: #fff"
              size="mini"
              :color="scope.row.views > 100 ? '#FFB800 ' : '#009688'"
              >{{ scope.row.views }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="likes" label="点赞数" width="60">
          <template slot-scope="scope">
            <el-tag
              style="color: #fff"
              size="mini"
              :color="scope.row.likes > 100 ? '#FFB800 ' : '#009688'"
              >{{ scope.row.likes }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="comments" label="评论数" width="60">
          <template slot-scope="scope">
            <el-tag
              style="color: #fff"
              size="mini"
              :color="scope.row.comments > 100 ? '#FFB800 ' : '#009688'"
              >{{ scope.row.comments }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="author.username" label="作者"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="180">
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="200"
          header-align="center"
        >
          <template slot-scope="scope">
            <div class="buttons">
              <el-button
                type="primary"
                size="mini"
                @click="handleClick(scope.row.id, 1)"
                >审核</el-button
              >
              <el-button
                type="primary"
                size="mini"
                style="background-color: #009688"
                @click="handleClick(scope.row.id, 2)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="mini"
                @click="handleClick(scope.row.id, 3)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[15, 20, 50, 100]"
        :current-page="pageParam.page"
        :page-size="pageParam.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { articleList, category } from '../../../api/api'

export default {
  components: {},
  created() {
    this.getArticleList(this.pageParam)
    this.getCategory()
  },

  data() {
    return {
      tableData: [],
      dateValue: null,
      total: 0,
      pageParam: {
        page: 1,
        limit: 15,
        title: null,
        type: null,
        categoryId: null,
        published: null,
        status: null,
        startDate: null,
        endDate: null
      },
      loading: true,
      sizeForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      //选择时间快捷面板
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      //文章类型
      typeOptions: [
        {
          value: 1,
          label: '原创'
        },
        {
          value: 2,
          label: '转载'
        }
      ],
      //文章分类
      categoryOptions: [],
      //发布状态
      publishedOptions: [
        {
          value: true,
          label: '发布'
        },
        {
          value: false,
          label: '草稿'
        }
      ],
      //审核状态
      statusOptions: [
        {
          value: 0,
          label: '审核未过'
        },
        {
          value: 1,
          label: '等待审核'
        },
        {
          value: 2,
          label: '审核通过'
        }
      ]
    }
  },

  methods: {
    //操作列的3个按钮
    //1  审核
    //2  编辑
    //3  删除
    handleClick(val, type) {
      console.log(val)
      console.log(type)

      switch (type) {
        case 1:
          console.log('审核')
          break
        case 2:
          console.log('编辑')
          break
        case 3:
          this.$confirm('删除后无法恢复，是否继续')
            .then((res) => {
              console.log(res)
            })
            .catch((err) => {
              console.log(err)
            })

          console.log('删除')
          break
      }
    },
    //获取文章
    getArticleList(param) {
      articleList(param).then((res) => {
        this.tableData = res.data
        this.total = res.count
        this.loading = false
      })
    },
    //获取分类列表
    getCategory() {
      category().then((res) => {
        this.categoryOptions = res.data
      })
    },
    handleSizeChange(val) {
      this.loading = true
      this.pageParam.limit = val
      this.getArticleList()
    },
    handleCurrentChange(val) {
      this.loading = true
      this.pageParam.page = val
      this.getArticleList()
    },
    onSubmit() {
      this.loading = true
      //处理数据
      //深拷贝

      let param = JSON.parse(JSON.stringify(this.pageParam))

      if (this.pageParam.startDate != null) {
        param.startDate = this.pageParam.startDate[0]
        param.endDate = this.pageParam.startDate[1]
      }
      console.log(param)

      this.getArticleList(param)
    },
    resetForm() {
      this.loading = true
      this.$refs.searchForm.resetFields()
      this.getArticleList(this.pageParam)
    }
  }
}
</script>

<style lang="less" scoped>
.table {
  margin-top: 10px;
}

.el-tag {
  color: #000;
  margin-right: 5px;
  margin-bottom: 5px;

  border-style: none;
}

.el-button--mini,
.el-button--mini.is-round {
  padding: 3px 8px;
}

.buttons {
  display: flex;
  justify-content: center;
}

.item {
  display: inline-block;
  width: 500px;
}

.search {
  /deep/.el-card__body {
    padding-bottom: 0;
  }
}
</style>
